import React,{useState} from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Image, NavBar, Toast } from '@nutui/nutui-react'
import { Button, Input, Form } from 'react-vant'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import axios from 'axios'
import { post } from '../../../axios/request'
// import { useState } from 'react'
export default function Setnewphone() {
    let navigate = useNavigate()
    let [search,setSearch]=useSearchParams()

    let pid=search.get('phoneid')
    console.log(pid,'pid');
    
    const [form] = Form.useForm()
    const [phoneid,setPhoneid]=useState('')
    const [code1,setCode1]=useState('')
    const [code2,setCode2]=useState('')
    const onFinish = values => {
        // console.log(values,'798465132')
    }
    //获取验证码
    const getcode=async()=>{
        // console.log(phoneid,'phone');
        let trim=phoneid.replace(/\s+/g, '')
        // console.log(trim);
        
        let {data}=await post('/getcode',{phoneid:trim})
        console.log(data);
        setCode1(data)
    }

    const compare=async()=>{
        if(code1==code2){
           
            let data=await post('/editpid',{oldp:pid,newp:phoneid})
            console.log(data);
            Toast.show('手机号修改成功！')
            navigate('/contmain')
            
        }else{
            Toast.show('验证码不正确')
        }
    }
    return (
        <div id='setnewphone'>
            <div className="top">
                <NavBar
                    style={{ backgroundColor: '#FFFFFF' }}
                    back={
                        <>
                            <ArrowLeft />
                            返回
                        </>
                    }
                    onBackClick={() => { navigate(-1) }}
                >
                    设置新手机号
                </NavBar>
                {/* <ArrowLeft></ArrowLeft> */}
            </div>
            <div className="cen">
                <Form
                    form={form}
                    // onFinish={onFinish}
                    footer={

                        <Button onClick={() => { compare() }} round nativeType='submit' style={{ backgroundColor: '#2D83FB', color: 'white', width: '8rem', marginLeft: '0.9rem', marginTop: '0.2667rem' }} block>确定</Button>

                    }
                >
                    <Form.Item
                        rules={[{ required: true, message: '请输入手机号' }]}
                        name='pid'
                        label='+86'
                    >
                        <Input onChange={(e)=>{setPhoneid(e)}} placeholder='请输入手机号' />
                    </Form.Item>
                    <Form.Item
                        // rules={[{ required: true, message: '请输入验证码' }]}
                        name='checkcode'
                        label='验证码'
                    >
                        <Input onChange={(e)=>{setCode2(e)}} placeholder='请输入验证码' />
                        <span onClick={()=>{getcode()}}>获取验证码</span>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
